import { FC } from 'react';
import style from './index.module.scss';
import { Button, Space } from 'antd';
import { LeftOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import EditorToolBar from './EditorToolBar';
import TitleElem from './TitleElemt';

const EditorHeader: FC = (props) => {
  const nav = useNavigate();

  const left = (
    <Space>
      <Button type="link" icon={<LeftOutlined />} onClick={() => nav(-1)}>
        返回
      </Button>
      <TitleElem />
    </Space>
  );

  const right = (
    <Space>
      <Button>保存</Button>
      <Button type="primary">发布</Button>
    </Space>
  );

  const mid = <EditorToolBar />;

  return (
    <div className={style.wrapper}>
      <div className={style.left}>{left}</div>
      <div className={style.mid}>{mid}</div>
      <div className={style.right}>{right}</div>
    </div>
  );
};

export default EditorHeader;
